<template>
	<view class="content">
		<view class="page-top">
			<view class="title-box">
				<view class="title">关于本校评选优秀教师优秀教师的选优秀教师优秀教师的</view>
				<text class="state state1">待审核</text>
			</view>
			<view class="info-box u-flex">
				<view class="time">
					02月06日 周二 10:30-12:00
				</view>
				<view class="user u-flex ">
					<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle" width="28rpx"
						height="28rpx">
					</u--image>
					<text>付玉</text>
				</view>
			</view>
		</view>
		<view class="box-part">
			<view class="box-title">
				基本信息
			</view>
			<view class="box-row u-flex u-m-t-15">
				<text>会议类型</text>
				<text>党支部会议</text>
			</view>
			<view class="box-row u-flex">
				<text>会议室</text>
				<text>第一会议室</text>
			</view>
			<view class="box-row u-flex">
				<text>物品领取</text>
				<text>没有</text>
			</view>
		</view>
		<view class="box">
			<view class="people-box u-flex">
				<view class="box-title">
					参会人 12
				</view>
				<view class="imgs-box u-flex">
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
			<view class="people-box u-flex">
				<view class="box-title">
					议题参与人 2
				</view>
				<view class="imgs-box u-flex">
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u--image class="user-img" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"
						width="40rpx" height="40rpx">
					</u--image>
					<u-icon name="arrow-right" color="#666666" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="box-part">
			<view class="box-title">
				会议主题
			</view>
			<view class="box-content">
				本次会议主要为了能够评选比上学期的优秀教师
			</view>
			<view class="box-title">
				会议内容
			</view>
			<view class="box-content">
				本次会议主要为了能够评选比上学期的优秀教师，请大家积极参与！主要为了能够评选比上学期的
			</view>
			<view class="box-title">
				附件
			</view>
			<view class="file-box u-flex">
				<u-icon name="attach" color="#4871C0" size="24"></u-icon>
				<text>小米的论文数据表修改版</text>
			</view>
		</view>

		<!-- 驳回状态下 -->
		<view class="button u-flex">
			<view class="button-item" @click="show = true">
				驳回
			</view>
			<view class="button-item" @click="show1 = true">
				通过
			</view>
		</view>
		<!-- 驳回弹窗 -->
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" title="驳回理由" confirmText="确定"
			:showCancelButton="true">
			<view class="slot-content reason-content">
				<u--textarea v-model="reason" height="100" placeholder="请驳回理由~" 
					border="surround" confirmType="done"></u--textarea>
			</view>
		</u-modal>
		<!-- 通过弹窗 -->
		<u-modal :show="show1" @confirm="confirm1" @cancel="cancel1" ref="uModal1" content="是否确认通过该项审批？" title="通过确认"
			confirmText="确定" :showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				reason: ''
			};
		},
		methods: {
			cancel() {
				this.show = false;
			},
			// 驳回
			confirm() {

			},
			cancel1() {
				this.show1 = false;
			},
			//通过
			confirm1() {

			},
		}

	};
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
		padding-bottom: 130rpx;
	}

	.u-flex {
		display: flex;
		align-items: center;
	}

	.page-top {
		padding: 30rpx;
		background-color: #fff;
	}

	.title-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		width: 80%;
	}

	.state {
		font-size: 24rpx;
		font-weight: 500;
		padding: 10rpx 12rpx;
	}

	.state1 {
		color: #8B48C0;
		background: #F8EEFF;
		border-radius: 8rpx;
		opacity: 1;
	}

	.state2 {
		color: #FF7A00;
		background: #FFECDA;
		border-radius: 8rpx;
		opacity: 1;
	}

	.info-box {
		margin-top: 24rpx;
	}

	.time {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-right: 30rpx;
	}

	.user text {
		font-size: 24rpx;
		font-weight: 500;
		color: #4871C0;
		margin-left: 10rpx;
	}

	.box-part {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 10rpx 30rpx;
	}

	.box-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.box-row {
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.box-row text:first-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}

	.box-row text:last-child {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.box {
		background-color: #fff;
		margin-top: 20rpx;
	}

	.people-box {
		justify-content: space-between;
		padding: 30rpx;
	}

	.people-box:first-child {
		border-bottom: 2px solid #F8F8F8;
	}

	.user-img {
		margin-right: 20rpx;
	}

	.box-content {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		padding: 30rpx 0;
		border-bottom: 2px solid #F8F8F8;
		margin-bottom: 20rpx;
	}

	.file-box {
		margin: 20rpx 0;
		padding: 20rpx;
		background: #F8F9FC;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.button {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		padding: 30rpx 0 40rpx 0;
		background-color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.reason {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		padding: 30rpx 0;
	}

	.button-item {
		width: 50%;
		text-align: center;
	}

	.button-item:first-child {
		color: #999999;
	}

	.reason-content {
		width: 100%;
		border-radius: 8rpx;
		opacity: 1;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	/deep/.u-textarea {
		background: #F8F8F8;
		border-radius: 8rpx;
		opacity: 1;
		text-align: left;
	}
	/deep/.uni-textarea-placeholder{
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
</style>
